// @dart=2.9
import 'dart:math';
import 'package:flutter/material.dart';

import '../color.dart';

///  自定义 密码输入框 第一步 —— 使用画笔画出单个的框
class RoundBox extends StatelessWidget {

  ///  传入当前密码
  String data;
  RoundBox(this.data);

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: MyPainter(data),
    );
  }
}

class MyPainter extends CustomPainter {
  /// 间隔
  final int PWD_SPACING = 5;
  ///密码大小
  final int PWD_SIZE = 5;
  ///密码长度
  final int PWD_LENGTH = 6;
  RRect mRect;
  ///  传入的密码，通过其长度来绘制圆点
  String pwdLength;
  MyPainter(this.pwdLength);
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..strokeWidth = 1.0
      ..style = PaintingStyle.fill
      ..color = ColorManager.colorF4F4F4
      ..invertColors = false;
    // 计算每个密码框宽度
    var rectWidth = size.height;
    var betweenSpace = (size.width - rectWidth*PWD_LENGTH)/(PWD_LENGTH - 1);//每一个密码框的间隔
    // var rectWidth = ((size.width - (1 - PWD_LENGTH) * PWD_SPACING) / PWD_LENGTH);
    // 绘制密码框
    for (int i = 0; i < PWD_LENGTH; i++) {
      var left = ((rectWidth + betweenSpace) * i) as double;
      var top = 0.0;
      var right = left + rectWidth;
      var bottom = (size.height - top);
      mRect = new RRect.fromLTRBR(left, top, right, bottom,new Radius.circular(size.height / 12));
      canvas.drawRRect(mRect, paint);
    }

    var paints = Paint();
    var per = size.width / 5.9;
    ///  画实心圆
    var half = per/2;
    var radio = per/12;
    paints.style = PaintingStyle.fill;
    ///  当前有几位密码，画几个实心圆
    for(int i =0; i< pwdLength.length && i< 6; i++){
      canvas.drawArc(new Rect.fromLTRB(i*per+half-radio-3, size.height/2-radio, i*per+half+radio-3, size.height/2+radio), 0.0, 2*pi, true, paints);
    }
  }

  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

